<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>文章列表页</title>
<link rel="stylesheet" type="text/css" href="/assets/css/common.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/normalize.css" />
<link rel="stylesheet" href="/assets/css/pagination.css" />

<style>
body {
	font-family: "微软雅黑";
	background-color: rgb(240, 240, 240);;
}

.jx-content {
	margin: 0 150px;
	background-color: #fff;
	padding: 10px;
	height: 100%;
}

.jx-search-box {
	margin: 0;
	width: 200px;
	height: 28px;
	border: 1px solid #BDBDBD;
	text-align: left;
}

.jx-search {
	float: right;
	margin-top: 20px;
}

.jx-search-button {
	display: inline-block;
	width: 32px;
	height: 32px;
	background: url(/assets/img/button.png);
}

.jx-col1 {
	display: inline-block;
	width: 15%;
	text-align: center;
}

.jx-col2 {
	display: inline-block;
	width: 45%;
	text-align: center;
}

.jx-col3 {
	display: inline-block;
	width: 20%;
	text-align: center;
}

.jx-col4 {
	display: inline-block;
	width: 15%;
	text-align: center;
}

.jx-th {
	background-color: #DFEBFB;
	padding: 5px 0;
	font-weight: bold;
}

.jx-list {
	font-size: 14px;
}

.jx-link {
	color: #3476a8;
	font-weight: bold;
}

.jx-td {
	border-bottom: 1px dashed #BDBDBD;
	padding: 5px 0;
}

.jx-pag {
	float: right;
	margin-top: 20px;
}

.jx-clear {
	clear: both;
}

.jx-loading {
	display: block;
	margin: 20px auto;
}

.jx-nav {
	background-color: #ddd;
	overflow: hidden;
}

.jx-nav-item {
	float: left;
	padding: 5px 10px;
	width: 80px;
	text-align: center;
}

.jx-nav-item:hover {
	background-color: #51a282;
}

.jx-nav-item:hover a {
	color: #fff;
}
</style>
</head>

<body>
	<div class="jx-content">
		<header>
			<img class="jx-logo" src="/assets/img/logo.png" />
			<div class="jx-search">
				<form id="form" action="/article/list" method="post">
					<input type="search" class="jx-search-box" placeholder="请输入关键字"
						value="$!{keyword}"> <span class="jx-search-button"></span>
				</form>
			</div>
			<ul class="jx-nav">
				<li class="jx-nav-item"><a href="/">首页</a></li>
				<li class="jx-nav-item"><a href="/user/center">个人中心</a></li>
			</ul>

		</header>

		<section>
			<ul class="jx-list">

				<li class="jx-th"><span class="jx-col1">栏目名称</span> <span
					class="jx-col2">标题</span> <span class="jx-col3">部门</span> <span
					class="jx-col4">时间</span></li>
				<img class="jx-loading" src="/assets/img/loading.gif">
				<script id="list" type="text/html">
				{{each data as value i}}
					<li class="jx-td">
						<span class="jx-col1">{{value.categroy_name}}</span>
						<span class="jx-col2">
							<a href="/article/detail/{{value.id}}" class="jx-link">{{value.title}}</a>
						</span>
						<span class="jx-col3">{{value.depart_name}}</span>
						<span class="jx-col4">{{value.create_time}}</span>
					</li>
				{{/each}}
				</script>
			</ul>

		</section>
		<section class="jx-pag">
			<div class="M-box"></div>
		</section>
		<div class="jx-clear"></div>
	</div>


	
	<script src="/assets/js/jquery.min.js" type="text/javascript"
		charset="utf-8"></script>
	<script src="/assets/js/jquery.pagination.js" type="text/javascript"
		charset="utf-8"></script>
	<script src="/assets/js/template.js" type="text/javascript"
		charset="utf-8"></script>
	<script>
		function getPagedata(pageNum, keyword) {
			$.post("/article/getPageData",
							{
								"pageNum" : pageNum,
								"keyword" : keyword
							},
							function(result) {
								$(".jx-td").remove();
								var html = template('list', result);
								$(".jx-loading").remove();
								$(".jx-list").append(html);
							}, "json");
		}

		$('.jx-search-button').click(function() {
			var keyword = $('.jx-search-box').val();
			if (keyword == '') {
				return;
			}
			window.location.href = "/article/list?keyword=" + keyword;
		});

		$(function() {
			var keyword = $('.jx-search-box').val();
			$('.M-box')
					.pagination(
							{
								pageCount : $pageCount,
								jump : true,
								coping : true,
								homePage : '首页',
								endPage : '末页',
								prevContent : '上页',
								nextContent : '下页',
								callback : function(index) {
									$(".jx-loading").remove();
									var pageNum = index.getCurrent();
									$(".jx-list")
											.append(
													'<img class="jx-loading" src="/assets/img/loading.gif">');
									var keyword = $('.jx-search-box').val();
									getPagedata(pageNum, keyword);
								}
							}, function(api) {
								getPagedata(1, keyword);
							});

		});
	</script>
</body>

</html>